<template>
	<view class="content tabs">
		<div class="uni-padding-wrap uni-common-mt card-list">
			<view class="card-tab">

				<div class="card-row-one">

					<view class="first_line">
						<sd-segmented-control :current="current" :values="items" :style-type="styleType" :active-color="activeColor"
						 @clickItem="onClickItem" class="margin-l" />
						<text class="first_line_text margin-r">用量</text>
					</view>
					<view class="contenter">
						<view class="list_content">
							<view v-for="m in accordion" :key="m.date" title="123" class="list_item">
								<text class="margin-l">{{m.date}}</text>
								<text class="margin-r">{{m.content}}</text>
							</view>
						</view>
					</view>
				</div>
			</view>
		</div>
	</view>
</template>

<script>
	import sdSegmentedControl from '@/components/sd-segmented-control/uni-segmented-control.vue'
	import sdCollapse from '@/components/sd-collapse/uni-collapse.vue'
	import sdCollapseItem from '@/components/sd-collapse-item/uni-collapse-item.vue'
	export default {
		components: {
			sdCollapse,
			sdCollapseItem,
			sdSegmentedControl
		},
		data() {
			return {
				//卡数据url
				getFlowUrl: '/card-flow/getFlow',

				items: ['年', '月'],

				current: 0,
				activeColor: '#78a8f2',
				styleType: 'button',

				tabBars: [{
					name: '流量使用明细',
					id: 'llmx'
				}, {
					name: '点击查看图表',
					id: 'cktb'
				}],
				newsList: [],
				cacheTab: [],
				tabIndex: 0,
				scrollInto: "",
				cardListData: [],
				//激活的bg颜色
				activateBg: '#0ac083',
				deactivateBg: '#ffa648',
				otherStatusBg: '#989898',
				dateType:'YEAR',
				data: [],
				loadMoreText: "加载中...",
				showLoadMore: true,
				animationData: null,
				timerList: [],
				accordion: [{
					date:'努力加载中·····',
					content:''
				}]
			};
		},
		onUnload() {
			this.page = {
				size: 5,
				current: 1
			}
			this.data = []
			this.showLoadMore = false;
		},
		onReachBottom() {
			this.showLoadMore = true;
			this.page.current++
			setTimeout(() => {
				this.initData();
			}, 300);
		},
		onPullDownRefresh() {
			this.page = {
				size: 5,
				current: 1
			}
			this.data = []
			this.initData();
			setTimeout(function() {

				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad(option) {
			if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
		　　		WeixinJSBridge.invoke('setFontSizeCallback', {
			　　		'fontSize': 0
			　　});
			　　// 重写设置网页字体大小的事件
			　　WeixinJSBridge.on('menu:setfont', function () {
			　　　　WeixinJSBridge.invoke('setFontSizeCallback', {
			　　　　　　'fontSize': 0
			　　　　});
			　　});
			　
			};
			this.cardId= option.cardId
			this.initData();
		},

		methods: {
			initData() {
				if(this.current==0){
					this.dateType = "YEAR"
				}else if(this.current==1){
					this.dateType = "MONTH"
				}else if(this.current==2){
					this.dateType = "DAY"
				}
				this.$req.userData(this.getFlowUrl, {id:this.cardId,dateType:this.dateType})
				.then(v=>{
					this.accordion=[]
					for(let a=0;a<v.data.dateList.length;a++){
						let obj = {}
						obj.date=v.data.dateList[a]
						obj.content = this.$toGB.exe(v.data.flowList[a])
						this.accordion.push(obj)
					}
					if(v.data.dateList.length==0){
						let obj = {}
						obj.date= "此卡暂无用量.."
						obj.content =""
						this.accordion.push(obj)
					}
				})
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
					this.initData()
				}
			},

		}
	};
</script>
<style lang="scss">
	@import '@/uni.scss';

	.contenter {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.tabs {
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		background-color: #ffffff;
		/* #ifdef MP-ALIPAY || MP-BAIDU */
		height: 100vh;
		/* #endif */
	}

	.scroll-h {
		width: 750rpx;
		height: 80rpx;
		flex-direction: row;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
		/* flex-wrap: nowrap; */
		/* border-color: #cccccc;
		border-bottom-style: solid;
		border-bottom-width: 1px; */
	}

	.line-h {
		height: 1rpx;
		background-color: #cccccc;
	}

	.uni-tab-item {
		/* #ifndef APP-PLUS */
		display: inline-block;
		/* #endif */
		flex-wrap: nowrap;
		padding-left: 34rpx;
		padding-right: 34rpx;
	}

	.uni-tab-item-title {
		color: #555;
		font-size: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		flex-wrap: nowrap;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.uni-tab-item-title-active {
		color: #007AFF;
	}

	.text {
		margin: 16rpx 0;
		width: 100%;
		background-color: #fff;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #555;
		border-radius: 8rpx;
	}

	.content {
		text-align: center;
		/* height: 400upx; */
		background-color: $theme-color !important;
		min-height: 100vh;
		padding-bottom: 40rpx;
	}

	.card-list {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	.card-tab {
		position: relative;
		background-color: #FFFFFF;
		width: 90%;
		border-radius: 5px;
		margin-top: 25upx;
		overflow: hidden;
		// padding: 20upx;
	}

	.card-row-one {
		display: flex;
		flex-direction: column;
		font-size: small;

		// justify-content: space-between;
		.first_line {
			width: 100%;
			height: 100rpx;
			position: relative;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			justify-items: center;
			align-items: center;

		}

		.first_line_text {
			// position: absolute;
			// left: 40rpx;
			// top: 50%;
			// margin-top: -20rpx;
			width: 40px;
			height: 24px;
			line-height: 24px;
			background-color: #78a8f2;
			border-radius: 8rpx;
			color: #FFFFFF;
			letter-spacing: 4rpx;
			text-align: center;
		}
	}


	.card-number {
		display: flex;
		color: $font-bule-color;
		margin-left: 10px;
		font-weight: bold;
		letter-spacing: 2upx;
		width: 75%;
	}

	.card-status {
		border-radius: 8px;
		height: 36upx;
		color: white;
		width: 180upx;
		margin-right: 0px;

		display: flex;
		justify-content: center;
		align-items: center;

	}





	.card-row-tow {
		display: flex;
		justify-content: space-between;
		margin-top: 5px;

		.card-four-number {
			font-size: 35upx;
			text-align: left;
		}

		.card-mb {
			display: flex;
			flex-direction: column;

		}

		.card-four-font {
			color: $font-grey-color;
			font-size: small;
			text-align: left;
		}
	}

	.card-row-three {
		display: flex;
		justify-content: space-between;
		margin-top: 5upx;

		.three-balance {
			font-size: medium;
		}

		.recharge-button {
			font-size: small;
			width: 120upx;
			background-color: $theme-color;
			color: white;
			border-radius: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.card-row-four {
		position: relative;
		width: 100%;
		height: 105upx;
		display: flex;
		align-items: center;

		.four-left {
			font-size: small;
			position: absolute;
			left: 0px;
			width: 240upx;
			text-align: left;



		}

		.four-right {
			display: flex;
			position: absolute;
			right: 0px;
			font-size: 20upx;

			color: $theme-color;
		}

		.four-btn {
			margin-left: 28px;

		}

		.btn-size {
			font-size: 21px;
		}

		.btn-color {

			color: $theme-color;


		}

		.btn-blue {
			color: #007AFF !important;

		}
	}

	.card-row-five {
		display: flex;
		justify-content: flex-end;
		margin-top: 5px;

		uni-button {

			margin-right: 0px;
			margin-left: 10px;

		}
	}

	.card-btn {
		border-radius: 8px;
		height: 35upx;

		color: #646464;
		padding-left: 10px;
		padding-right: 10px;
		font-size: small;
		border: 1px solid $font-grey-color;
	}

	.card-recharge-btn {

		@extend .card-btn;
		border: 1px solid $font-bule-color !important;
		color: $font-bule-color !important;
	}

	.card-detail {
		background-color: #ffa648 !important;
		border: 1px solid #ffa648 !important;
		color: white !important;
	}

	.card-copy {
		background-color: #0ac083 !important;
		border: 1px solid #0ac083 !important;
		color: white !important;
	}

	.card-order {
		background-color: #f04806 !important;
		border: 1px solid #f04806 !important;
		color: white !important;

	}

	.line {
		background-color: #f2f2f2;
		height: 1px;
	}

	.ininer-line {
		background-color: $theme-color;
		position: absolute;
		width: 50%;
		height: 1px
	}

	.list_content {
		width: 100%;
	}

	.list_item {
		width: 100%;
		height: 48px;
		line-height: 24px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		justify-items: center;
		align-items: center;
	}

	.list_item:nth-child(odd) {
		background-color: #eef5ff;
	}

	.margin-l {
		margin-left: 40rpx;
	}

	.margin-r {
		margin-right: 40rpx;
	}

	.pading-l {
		pading-left: 40rpx;
	}

	.pading-r {
		pading-right: 40rpx;
	}
</style>
